<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信小程序 TabBar 图标生成器</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .instructions {
            background: #e7f3ff;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .icon-item {
            text-align: center;
            padding: 20px;
            background: #fafafa;
            border-radius: 8px;
        }
        .icon-item h3 {
            margin: 10px 0;
            font-size: 14px;
            color: #666;
        }
        canvas {
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 10px 0;
            cursor: pointer;
        }
        canvas:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .download-btn {
            background: #07c160;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            margin: 5px;
        }
        .download-btn:hover {
            background: #06ad56;
        }
        .color-normal {
            color: #7A7E83;
        }
        .color-active {
            color: #007AFF;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 微信小程序 TabBar 图标生成器</h1>

        <div class="instructions">
            <strong>使用说明：</strong>
            <ol>
                <li>下方自动生成了8个图标（每个功能2个状态：正常/选中）</li>
                <li>点击"下载"按钮保存对应图标到 <code>src/static</code> 文件夹</li>
                <li>图标尺寸：81×81px，符合微信小程序规范</li>
            </ol>
        </div>

        <div class="icon-grid" id="iconGrid"></div>
    </div>

    <script>
        const icons = [
            { name: 'market', filename: 'market.png', label: '市场大厅', symbol: '🏪', normalColor: '#7A7E83', activeColor: '#007AFF' },
            { name: 'add', filename: 'add.png', label: '发布需求', symbol: '➕', normalColor: '#7A7E83', activeColor: '#007AFF' },
            { name: 'match', filename: 'match.png', label: '撮合中心', symbol: '🤝', normalColor: '#7A7E83', activeColor: '#007AFF' },
            { name: 'user', filename: 'user.png', label: '我的', symbol: '👤', normalColor: '#7A7E83', activeColor: '#007AFF' }
        ];

        function drawIcon(canvas, symbol, color) {
            const ctx = canvas.getContext('2d');
            const size = 81;

            // Clear canvas
            ctx.clearRect(0, 0, size, size);

            // Set background
            ctx.fillStyle = '#FFFFFF';
            ctx.fillRect(0, 0, size, size);

            // Draw emoji/symbol
            ctx.font = '48px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            // Add subtle circle background
            ctx.fillStyle = color + '20';
            ctx.beginPath();
            ctx.arc(size/2, size/2, 35, 0, Math.PI * 2);
            ctx.fill();

            // Draw the symbol
            ctx.fillStyle = color;
            ctx.fillText(symbol, size/2, size/2);
        }

        function downloadCanvas(canvas, filename) {
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL('image/png');
            link.click();
        }

        // Generate all icons
        const grid = document.getElementById('iconGrid');

        icons.forEach(icon => {
            // Normal state
            const normalDiv = document.createElement('div');
            normalDiv.className = 'icon-item';

            const normalTitle = document.createElement('h3');
            normalTitle.textContent = `${icon.label} (正常)`;
            normalTitle.className = 'color-normal';

            const normalCanvas = document.createElement('canvas');
            normalCanvas.width = 81;
            normalCanvas.height = 81;
            drawIcon(normalCanvas, icon.symbol, icon.normalColor);

            const normalBtn = document.createElement('button');
            normalBtn.className = 'download-btn';
            normalBtn.textContent = '下载 ' + icon.filename;
            normalBtn.onclick = () => downloadCanvas(normalCanvas, icon.filename);

            normalDiv.appendChild(normalTitle);
            normalDiv.appendChild(normalCanvas);
            normalDiv.appendChild(normalBtn);
            grid.appendChild(normalDiv);

            // Active state
            const activeDiv = document.createElement('div');
            activeDiv.className = 'icon-item';

            const activeTitle = document.createElement('h3');
            activeTitle.textContent = `${icon.label} (选中)`;
            activeTitle.className = 'color-active';

            const activeCanvas = document.createElement('canvas');
            activeCanvas.width = 81;
            activeCanvas.height = 81;
            drawIcon(activeCanvas, icon.symbol, icon.activeColor);

            const activeBtn = document.createElement('button');
            activeBtn.className = 'download-btn';
            activeBtn.textContent = '下载 ' + icon.filename.replace('.png', '-active.png');
            activeBtn.onclick = () => downloadCanvas(activeCanvas, icon.filename.replace('.png', '-active.png'));

            activeDiv.appendChild(activeTitle);
            activeDiv.appendChild(activeCanvas);
            activeDiv.appendChild(activeBtn);
            grid.appendChild(activeDiv);
        });
    </script>
</body>
</html>